<template>
  <div>
    <button @click="onLoadData">加载数据</button>
    <div style="height: 240px">
      <ChartView ref="chartViewRef"></ChartView>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      name: '产量',
      /**
       * 图表类型
       */
      type: 'bar',
    },
  ],
}

let i = 0
let intervalFlag
onMounted(() => {
  chartViewRef.value.setOption(option)
  intervalFlag = setInterval(() => {
    i++
    let oriData = [
      { data: '第1周', value: 120 },
      { data: '第2周', value: 200 },
      { data: '第3周', value: 150 },
      { data: '第4周', value: 80 },
      { data: '第5周', value: 70 },
      { data: '第6周', value: 110 },
      { data: '第6周', value: 130 },
    ].map(item => [item.data, item.value])
    if (i % 2 === 0) {
      oriData = [
        { data: '第1周', value: 20 },
        { data: '第2周', value: 100 },
        { data: '第3周', value: 250 },
        { data: '第4周', value: 180 },
        { data: '第5周', value: 170 },
        { data: '第6周', value: 10 },
        { data: '第6周', value: 130 },
      ].map(item => [item.data, item.value])
    }
    chartViewRef.value.setOption({
      series: [
        {
          name: '产量',
          data: oriData,
        },
      ],
    })
  }, 2000)
})

onBeforeUnmount(() => {
  if (intervalFlag) {
    window.clearInterval(intervalFlag)
  }
})
</script>
